<template>
  <div>
    <pro-table
      ref="tableRef"
      :data="tableData"
      :total="total"
      :columns="columns"
      :tool-button="false"
      @search="commEvent.onSearch"
      :page-change="commEvent.onPageChange"
    >
      <!-- 顶部配置项 -->
      <!-- <template #tableHeader>
        <el-row justify="end">
          <el-button type="primary" icon="Bottom" @click="commEvent.onImportPlan()">导入生产计划</el-button>
          <el-button icon="Bottom" @click="commEvent.onImportData()">导入日产数据</el-button>
        </el-row>
      </template> -->
      <!-- 操作 -->
      <template #operation="{ row: rowData }">
        <el-button type="danger" link @click="commEvent.onView(rowData)">查看</el-button>
      </template>
    </pro-table>
    <!-- 查看详情 -->
    <OrderdetailDialog v-model="viewVisible" :rows="currRow" :factorys="factoryEnum" :lines="lineEnum" />
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import OrderDetailExpand from "./components/OrderDetailExpand.vue"
import OrderdetailDialog from "./components/OrderdetailDialog.vue"
import { ColumnProps, EnumProps, ProTableInstance } from "@/components/ProTable/interface"
import { orderPage } from "@/api/modules/order"
import { dataDictionaryByType, organByLevel } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/order"
// 参数
const tableRef = ref<ProTableInstance>() // 表格实例
const tableData = ref<SystemSpace.orderPage[]>([]) // 表格数据
const total = ref<number>(0) // 数据总数
const viewVisible = ref<boolean>(false)
const importVisible = ref<boolean>(false) // 导入弹窗
const importType = ref<"plan" | "daily">("plan") // 导入类型
const currRow = ref<SystemSpace.orderPage>() // 当前选中数据
const factoryEnum = ref<EnumProps[]>([]) // 厂区
const lineEnum = ref<EnumProps[]>([]) // 产线
// const deviceTypeEnum = ref<EnumProps[]>([]) // 设备类型
const energyGradeEnum = ref<EnumProps[]>([]) // 能耗等级
// 页码参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 表格列配置
const columns: ColumnProps<SystemSpace.orderPage>[] = [
  {
    type: "expand",
    label: "展开",
    width: 50,
    render: (scope: any) => h(OrderDetailExpand, { row: scope.row })
  },
  {
    prop: "sort",
    label: "序号",
    width: 80,
    render: scope => h("span", scope.$index + 1 + (pageParams.value.pageIndex - 1) * pageParams.value.pageSize)
  },
  { prop: "code", label: "生产订单", width: 120 },
  { prop: "factoryId", label: "所属厂区", width: 120, enum: factoryEnum, search: { el: "select" } },
  { prop: "lineId", label: "所属产线", width: 120, enum: lineEnum, search: { el: "select" } },
  { prop: "version", label: "生产版本", width: 120 },
  { prop: "materialNo", label: "物料号", width: 160 },
  { prop: "orderCnt", label: "排产数量", width: 120 },
  { prop: "produceCnt", label: "完工数量", width: 120 },
  { prop: "powerCnt", label: "能耗（kWh）", width: 120 },
  { prop: "factoryId", label: "单耗（kWh/t）", width: 120 },
  { prop: "personCharge", label: "研发员", width: 120 },
  { prop: "updateBy", label: "更新人", width: 120 },
  { prop: "updateTime", label: "更新时间", width: 120 },
  { prop: "operation", label: "操作", width: 120, fixed: "right" }
]
// 事件集合
const commEvent = {
  onView: (row?: SystemSpace.orderPage) => {
    console.log("查看", row)
    currRow.value = row
    viewVisible.value = true
  },
  // 获取所属厂区
  getFactory: async () => {
    const { data } = await organByLevel(1)
    factoryEnum.value = data.map(item => ({
      label: item.organName,
      value: item.id
    }))
  },
  // 获取所属产线
  getLine: async () => {
    const { data } = await organByLevel(2)
    lineEnum.value = data.map(item => ({
      label: item.organName,
      value: item.id
    }))
  },
  // 获取能耗等级
  getEnergyGrade: async () => {
    const { data } = await dataDictionaryByType("energy_grade")
    energyGradeEnum.value = data.map(item => ({
      label: item.dictLabel,
      value: Number(item.dictValue)
    }))
  },
  // 获取表格数据
  getTableData: async (params: SystemSpace.orderPageQuery) => {
    const { data } = await orderPage(params)
    tableData.value = data.result
    total.value = data.totalCount
  },
  // 查询
  onSearch: () => {
    tableRef.value?.search()
    pageParams.value.pageIndex = 1
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ...pageParams.value, ..._search })
  },
  // 分页
  onPageChange: (page: number, size: number) => {
    pageParams.value.pageIndex = page
    pageParams.value.pageSize = size
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ...pageParams.value, ..._search })
  },
  // 导入生产计划
  onImportPlan: () => {
    importType.value = "plan"
    importVisible.value = true
  },
  // 导入日产数据
  onImportData: () => {
    importType.value = "daily"
    importVisible.value = true
  },
  //  新增/编辑
  onSave: (row?: SystemSpace.orderPage) => {
    currRow.value = row
    // saveVisible.value = true
  }
}
onMounted(() => {
  commEvent.getTableData(pageParams.value)
  commEvent.getEnergyGrade()
  commEvent.getFactory()
  commEvent.getLine()
})
</script>
